<script setup>
import { cloneDeep } from 'lodash-es';

const items = reactive([]);
const editableData = reactive({});
const ableToOperateRowKey = ref();
const isEdit = ref(false);

/**
 * 标题点击
 * @param {*} key
 */
const handleLabelClick = (key) => {
  ableToOperateRowKey.value = key;
};
const handleAdd = () => {
  // TODO: 调接口传入空事项名称新增
  if (!ableToOperateRowKey.value) {
    const key = Date.now();
    items.splice(0, 0, {
      title: '',
      key,
    });

    isEdit.value = true;
    editableData[key] = cloneDeep(items.filter(item => key === item.key)[0]);
    ableToOperateRowKey.value = key;
  }
};
const handleSave = (key) => {
  // TODO: 调保存接口
  Object.assign(items.filter(item => key === item.key)[0], editableData[key]);

  delete editableData[key];
  ableToOperateRowKey.value = null;
  isEdit.value = false;
};
const handleEdit = (key) => {
  isEdit.value = true;

  // 变为编辑状态
  editableData[key] = cloneDeep(items.filter(item => key === item.key)[0]);
};
const delConfirmEvent = (key) => {
  // 和编辑按钮同时存在时为删除，和保存按钮同时存在时为取消，
  if (isEdit.value) {
    // 取消操作
    delete editableData[key];
    items.splice(items.findIndex(item => item.key === key), 1);
  } else {
    // 删除操作调接口
  }
  ableToOperateRowKey.value = null;
  isEdit.value = false;
};
</script>

<template>
<el-popover
  popper-class="wel-calendar-card-item__popper"
  placement="bottom"
  :width="250"
  trigger="click"
>
  <template #reference>
    <slot></slot>
  </template>
  <div class="wel-calendar-card-item">
    <div class="header">
      <label class="header__title">我的事项</label>
      <div class="header--add" @click="handleAdd">添加新事项</div>
    </div>
    <div class="body">
      <div class="body__list" v-for="item in items" :key="item">
        <div class="body__list-item">
          <i class="item-pot"></i>
          <el-input
            class="item--input"
            v-if="editableData[item.key]"
            v-model="editableData[item.key].title"
            placeholder="请输入事项"
            clearable
            size="small"
          />
          <p v-else class="item--label" :title="item.title" @click="handleLabelClick(item.key)">
            {{ item.title }}
          </p>
        </div>
        <div class="body__list-operate">
          <div v-if="ableToOperateRowKey === item.key">
            <span v-if="isEdit">
              <picture>
                <source srcset="@/assets/images/home/calendar-popper-save.webp" type="image/webp">
                <source srcset="@/assets/images/home/calendar-popper-save.png" type="image/png">
                <img
                  src="@/assets/images/home/calendar-popper-save.png"
                  title="保存"
                  class="body__list--save"
                  @click="handleSave(item.key)">
              </picture>
            </span>
            <span v-else>
              <picture>
                <source srcset="@/assets/images/home/calendar-popper-edit.webp" type="image/webp">
                <source srcset="@/assets/images/home/calendar-popper-edit.png" type="image/png">
                <img
                  src="@/assets/images/home/calendar-popper-edit.png"
                  title="编辑"
                  class="body__list--edit"
                  @click="handleEdit(item.key)">
              </picture>
            </span>
            <el-popconfirm
              :teleported="false"
              :title="isEdit ? '是否取消?' : '是否删除?'"
              @confirm="delConfirmEvent(item.key)"
            >
              <template #reference>
                <picture>
                  <source srcset="@/assets/images/home/calendar-popper-del.webp" type="image/webp">
                  <source srcset="@/assets/images/home/calendar-popper-del.png" type="image/png">
                  <img title="删除" src="@/assets/images/home/calendar-popper-del.png" class="body__list--del">
                </picture>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </div>
      <div class="body--empty" v-if="!items.length">
        <picture>
          <source srcset="@/assets/images/home/calendar-popper-empty.webp" type="image/webp">
          <source srcset="@/assets/images/home/calendar-popper-empty.png" type="image/png">
          <img src="@/assets/images/home/calendar-popper-empty.png" class="body--empty__img">
        </picture>
        <div class="body--empty__text">此日无事项记录</div>
      </div>
    </div>
  </div>
</el-popover>
</template>

<style lang="scss">
.wel-calendar-card-item__popper {
  padding: 0 !important;
  min-height: 160px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(37,41,44,0.2);
  border-radius: 2px;

  &[data-popper-placement^=bottom] > .el-popper__arrow::before {
    background-color: #2E72EF;
  }
}
</style>

<style lang="scss" scoped>
@import '@/assets/style/common.scss';

.wel-calendar-card-item {
  .header {
    height: 30px;
    background: #2e72ef;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;

    .header__title {
      color: #ffffff;
      margin-left: 10px;
    }

    .header--add {
      width: 80px;
      height: 20px;
      background: #ffffff;
      color: #2e72ef;
      font-weight: 400;
      line-height: 21px;
      cursor: pointer;
      user-select: none;
      text-align: center;
      border-radius: 2px;
      margin-right: 10px;
    }
  }
  .body {
    height: 130px;

    .body__list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      margin-top: 5px;

      .body__list-item {
        width: 190px;
        display: flex;
        align-items: center;

        .item-pot {
          width: 4px;
          height: 4px;
          background: #2e72ef;
          border-radius: 50%;
          margin-left: 10px;
          margin-right: 6px;
        }

        .item--label {
          @include ellipsis;
          height: 20px;
          width: 170px;
          margin-block-start: 0;
          margin-block-end: 0;
          cursor: pointer;
        }
      }

      .body__list-operate {
        & img {
          width: 12px;
          height: 12px;
          object-fit: cover;
          cursor: pointer;
          margin-left: 8px;
        }

        .body__list--del {
          margin-right: 10px;
        }
      }
    }

    .body--empty {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 29px;

      .body--empty__img {
        width: 56px;
        height: 48px;
        object-fit: cover;
      }

      .body--empty__text {
        margin-top: 9px;
        font-size: 12px;
        color: #989da3;
      }
    }
  }
}
</style>
